今日文章目錄：

• 建立專案步驟
• 參考資源

剛剛發現昨天的文章打到一半就上傳了？昨天腦子到底是多不好使，我還真不記得我只打了一半，其他的部分是在夢裡完成的嗎？？？
但今天也沒好到哪去，我邊吃月餅邊糾結這10天要練習什麼東西，想個半天(對～又是當天才想)，決定還是做一個番茄鐘時間管理(幹！那麼沒創意！這個有什麼好想的)，弄個Prettier + ESLint弄個半死，今天只有基礎設定可以寫了！等等還要回去補昨天的文章～

建立專案步驟

• 以下的步驟，我使用 VS Code編輯，並直接在VS Code的終端機下指令。
  

• 使用官網-create React app說明，但這裡我統一使用 yarn 套件管理工具。

      yarn create react-app 我的專案名稱
      yarn create react-app pomodoro-project
  

• 下指令將目前位置指向剛剛新建的專案，並執行 yarn start，程式會安裝React的基礎環境。
  瀏覽器會自動打開位置在http://localhost:3000/，畫面顯示Welcome to React，代表安裝完成。

      cd pomodoro-project
      yarn start
  

• 我先到我的github新建Pomodoro-project專案，並複製該專案的位址，等等會串連本地端的React專案，之後作為備案資料紀錄。

• 回到VS Code，在終端機下指令

      git init
      git add remote 自訂遠端名稱 串接的github位址
      git add remote origin https://github.com/chen-chens/Pomodoro-project.git
  

• 來試試看能不能成功與github連接：執行以下指令，重新reload github，有看到資料就代表上傳成功！

      git add .                              // 將剛剛異動的資料全部存檔(local)
      git commit -m "init pomodoro-project"  // 紀錄修改內容
      git push 剛剛自訂的遠端名稱 哪一個分支 
      git push origin master                 // 將local資料更新至remote
      git status                             // 查看目前git 狀態，可以在每次執行動作後確認
  

• 在專案中加入 Prettier + ESLint package (這裡我還是有點模糊，附上我參考的教學文章)

  • Setting up ESLint(教學文有使用Typescript，這次專案不會用到)
  • Setting up Prettier(教學文有使用Typescript，這次專案不會用到)
  • ESLint官網規則
  • Prettier官網規則

參考資源：

在設定專案 Prettier + ESLint 的時候，我一直在想如果我在 VScode 已經有 Prettier + ESLint 外掛，為什麼還要在專案弄一遍？翻了一輪教學文章，總算找到兩篇回覆：

• What is the difference between installing eslint as extension and installing as npm package?
• what is the difference between installing prettier as a NPM package and installing prettier extension in VS Code
  基本上在多人專案時，每個人習慣使用的IDE或coding style setting都不盡相同。
  為了確保該專案每個人使用(1) 一致的 coding style (2) 輔助工具 Prettier + ESLint 都在相同版本上，故專案開發會載入Prettier + ESLint package，如果有任何更新版本，只要下指令yarn install就可以讓所有人都拿到同一個版本，可以有效維護專案統一性。

我在找到這兩篇答案，心裡的燈泡亮了!!